<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>签约说明</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff!important;
  }
  #app {
    padding: 10px;
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
/*    background-image: url("/mobile/img/top_bg.jpg");*/
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }
  .btn-box {
    margin: 16px 0;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
  }
  .feedback-btn {
    width: 100%;
  }
  .van-cell {
    background: #05071D;
    color: #fff;
  }
  
  </style>
</head>

<body>
  <div id="app">
    <van-field :readonly="!edit" v-model="content" :border="false" type="textarea" rows="15" placeholder="请输入签约说明"></van-field>
    <div v-if="edit==1" class="btn-box">
      <van-button class="feedback-btn" :disabled="!content.length" color="linear-gradient(270deg, #9358F4 0%, #6E53F3 100%)" round @click="submitForm" :loading="loading" loading-text="保存中...">保存</van-button>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      id: '',
      token: '',
      content: '',
      edit: '',
      loading: false,
      
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      console.log(data)
      if (data.id && data.name && data.token) {
        this.id = data.id
        document.title = '签约说明-' + data.name
        this.token = data.token
        this.edit = data.edit
        this.getData()
      }
      console.log(this.edit)
    },
    methods: {
      getData() {
        var query = `id=${this.id}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/business/app/family/getSignDeclare?${str}`).then(res => {
          console.log(res)
          this.content = res.data ? res.data : '暂未设置签约说明'
        }).catch(e => {
          console.log(e)
        })
      },
      submitForm () {
        this.loading = true
        request.post('/api/business/app/family/setSignDeclare', {
          familyId: this.id,
          signDeclare: this.content,
        }).then(res => {
          console.log(res)
          this.loading = false
          this.$toast({
            message: '保存成功',
            duration: 1500,
            onClose() {
              history.back()
            }
          })
        }).finally(() => {
          this.loading = false
        })
      }
    }
  })
  </script>
</body>

</html>